<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_2018856_0dfbg7hkx8g.css"
    />
    <link rel="stylesheet" href="css/zhaopin.min.css" />
    <script src="js/jquery.min.js"></script>
  </head>
  <body>
    <header>
      <div class="header">
        <img src="img/logo.png" class="logo" />
        <ul class="nav">
          <li><a href="indexfirst.html">首页</a></li>
          <li>
            <a href="#"
              >走进运达
              <div class="iconfont icon-xiajiantou"></div
            ></a>
            <div class="nav-two">
              <ul>
                <li>公司概况</li>
                <li>企业文化</li>
                <li>公司发展历程</li>
                <li>荣誉证书</li>
                <li>运达新闻</li>
                <li>运达视界</li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#"
              >产品与服务
              <div class="iconfont icon-xiajiantou"></div
            ></a>
            <div class="nav-two">
              <ul>
                <li>
                  <ul>
                    <li>产品与解决方案</li>
                    <li>仿真培训系统</li>
                    <li>列车安全检测解决方案</li>
                    <li>信息化解决方案</li>
                    <li>牵引与网络控制解决方案</li>
                    <li>安全测控解决方案</li>
                    <li>专业集成解决方案</li>
                  </ul>
                </li>
                <li>企业文化</li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#"
              >投资者关系
              <div class="iconfont icon-xiajiantou"></div
            ></a>
            <div class="nav-two">
              <ul>
                <li>公司概况</li>
                <li>企业文化</li>
                <li>公司发展历程</li>
                <li>荣誉证书</li>
                <li>运达新闻</li>
                <li>运达视界</li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#"
              >加入运达
              <div class="iconfont icon-xiajiantou"></div
            ></a>
            <div class="nav-two">
              <ul>
                <li>公司概况</li>
                <li>企业文化</li>
                <li>公司发展历程</li>
                <li>荣誉证书</li>
                <li>运达新闻</li>
                <li>运达视界</li>
              </ul>
            </div>
          </li>
        </ul>
        <ul class="nav2">
          <li><a href="#">你好，请登录</a></li>
          <li><a href="#">注册</a></li>
          <li>&nbsp;|&nbsp;</li>
          <li>
            <div class="iconfont icon-diqiu"></div>
            <span><a href="#">CN</a></span>
            <div class="iconfont icon-xiajiantou"></div>
          </li>
        </ul>
      </div>
    </header>
    <main>
      <div class="tupian">
        <div class="wenzi">
          <h1>加入运达</h1>
          <br /><br />
          <span> JOIN YUNDA </span><br />
          <div class="xian"></div>
        </div>
      </div>
      <div class="po">
        <ul>
          <li><a href="#">人才理念</a></li>
          <li><a href="#">运达风采</a></li>
          <li class="pu"><a href="#">社会招聘</a></li>
          <li><a href="#">校园招聘</a></li>
        </ul>
      </div>
      <div class="beijing">
        <h1>招聘岗位</h1>
        <div class="yun">
          <h3>运达科技期待您的加入</h3>
          <br />
          <h4>
            如果您有热情与兴趣加入我们的团队，请将简历发送到Recruitment@yunda-tec.com，我们将与您取得联系！
          </h4>
          <input class="place" list="listId" placeholder="工作地点" />
          <datalist id="listId">
            <option value="成都"></option>
            <option value="北京"></option>
          </datalist>
          <input class="postion" list="listId2" placeholder="招聘职位" />
          <datalist id="listId2">
            <option value="C++软件工程师"></option>
            <option value="C#软件工程师"></option>
            <option value="成本主管"></option>
            <option value="预算分析师"></option>
            <option value="嵌入式软件工程师"></option>
            <option value="硬件开发工程师"></option>
            <option value="数据分析工程师"></option>
          </datalist>
          <input class="sear" type="text" placeholder="搜索职位关键词" />
          <button>搜索</button>
        </div>
        <div class="zhiwei">
          <ul class="jqAjax">
            <li>
              <div>
                <span>招聘职位</span><span>招聘人数</span><span>工作地点</span
                ><span>发布日期</span><span></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </main>
  </body>
  <script>
    $(function () {
      $.ajax({
        type: "get",
        url: "js/zhaoping.json",
        success: function (response) {
          getData(response);
        },
      });

      var getData = (getdata) => {
        var searchPostion = [];
        getdata.data.forEach((value) => {
          var li = $(`
            <div class="jqAjax-posi">
              <span>${value.postion}</span><span>${value.personNum}</span
              ><span>${value.place}</span><span>${value.date}</span><span class="bian">＋</span>
            </div>
            <div class="positwo">
            </div>`);
          $(".jqAjax").append(li);
        });
        $(".jqAjax-posi").hover(
          function () {
            console.log(this);
            $(this).find(".bian").text("－");
          },
          function () {
            $(this).find(".bian").text("＋");
          }
        );
        $(".jqAjax-posi").click(function () {
          $(this).next(".positwo").toggle();
        });

        //模糊搜索
        $("button").click(function () {
          // 清除掉里面的内容
          $(".jqAjax-posi").empty();
          // 获取到查询的值
          var inputVal = $(".sear").val();
          getdata.data.forEach(function (value) {
            if (value.postion.indexOf($(".sear").val()) != -1) {
              // 查询到追加value.postion == inputVal
              var li = $(`
            <div class="jqAjax-posi">
              <span>${value.postion}</span><span>${value.personNum}</span
              ><span>${value.place}</span><span>${value.date}</span><span class="bian">＋</span>
            </div>
            <div class="positwo">
            </div>`);
              $(".jqAjax").append(li);
            }
          });
        });

        //地区选择
        $(".place").blur(function (e) { 
          $(".jqAjax-posi").empty();
          getdata.data.forEach(function (value) {
          if (value.place.indexOf($(".place").val()) != -1) {
            var li = $(`
            <div class="jqAjax-posi">
              <span>${value.postion}</span><span>${value.personNum}</span
              ><span>${value.place}</span><span>${value.date}</span><span class="bian">＋</span>
            </div>
            <div class="positwo">
            </div>`);
              $(".jqAjax").append(li);
          }else{
            $(".jqAjax-posi").empty();
          }
        })
          e.preventDefault();
          
        });
        //职位选择
        $(".postion").blur(function (e) { 
          $(".jqAjax-posi").empty();
          getdata.data.forEach(function (value) {
          if (value.postion.indexOf($(".postion").val()) != -1) {
            var li = $(`
            <div class="jqAjax-posi">
              <span>${value.postion}</span><span>${value.personNum}</span
              ><span>${value.place}</span><span>${value.date}</span><span class="bian">＋</span>
            </div>
            <div class="positwo">
            </div>`);
              $(".jqAjax").append(li);
          }
        })
          e.preventDefault();
          
        });
      };
    });
  </script>
</html>
